<template>
 <div class="shop" v-loading="loading">

     <el-button type="primary" size="mini" @click="exportOrderData"  style="float:left;">导出数据</el-button>

     <div style="float:right;margin-bottom:20px;">
         <el-date-picker v-model="created_at_GT"
          type="date"
          size="mini"
          style="width:136px"
          value-format="yyyy-MM-dd"
          placeholder="选择开始时间">
        </el-date-picker> ~ <el-date-picker v-model="created_at_LT"
          type="date"
          size="mini"
          style="width:136px;margin-right:12px;"
          value-format="yyyy-MM-dd"
          placeholder="选择结束时间"></el-date-picker>

          <!-- <el-select style="width:100px;margin-right:12px;"
          v-model="order_type"
          filterable
          size="mini"
          placeholder="缴费类型">
          <el-option
            label="全部"
            value="0"></el-option>
        <el-option
            label="全额入驻"
            value="40"></el-option>
  
            <el-option label="押金入驻"
            value="41"></el-option>
        </el-select> -->

          <el-select style="width:100px;margin-right:12px;"
          v-model="order_status"
          filterable
          size="mini"
          placeholder="订单状态">
          <!-- <el-option
            label="待支付"
            :value="1"></el-option> -->
        <el-option
            label="已支付"
            :value="5"></el-option>
        <!-- <el-option label="已核销"
            :value="10"></el-option> -->
        <!-- <el-option label="已取消"
            :value="15"></el-option> -->
            <el-option label="已关闭"
            :value="20"></el-option>
        </el-select>

          <el-input class="input"
        v-model="mobile"
        placeholder="输入邀请主账号搜索"
        clearable
        style="width:144px;margin-right:12px;"
        size='mini'></el-input>
         <el-input class="input"
        v-model="mobile"
        placeholder="输入用户账号搜索"
        clearable
        style="width:144px;margin-right:12px;"
        size='mini'></el-input>
        <br/>
         <el-input class="input"
        v-model="order_no"
        placeholder="输入订单编号搜索"
        clearable
        style="width:144px;margin-right:12px;margin-top:20px;"
        size='mini'></el-input>
      <el-button type="primary"
        @click="searchShopOrder"
        size='mini'>搜索</el-button>

     </div>


     <el-table
      :data="tableData"
      style="width:100%;margin:20px 0;"
      max-height="630"
      :cell-style="tc"
      :header-cell-style="tccolor">

    <el-table-column label="订单编号" prop="id"></el-table-column>
    <el-table-column label="下单用户" >
        <template slot-scope="scope">
           {{scope.row.memberName}}
        </template>
    </el-table-column>
    <el-table-column label="付款金额">
        <template slot-scope="scope">
            <p v-if="scope.row.actualAmount">¥{{scope.row.actualAmount}}</p>
            <p v-else>---</p>
        </template>
    </el-table-column>
    <el-table-column label="已认领小店" >
        <template slot-scope="scope">
            <p v-if="scope.row.sellerName">{{scope.row.sellerName}}</p>
            <p v-else>---</p>
        </template>
    </el-table-column>
    <el-table-column label="小店地址" >
        <template slot-scope="scope">
            <p v-if="scope.row.sellerAddress">{{scope.row.sellerAddress}}</p>
            <p  v-else>---</p>
        </template>
    </el-table-column>

    <el-table-column label="支付流水号" >
       <template slot-scope="scope">
         <p v-if="scope.row.orderNo">{{scope.row.orderNo}}</p>
         <p v-else>---</p>
       </template>
    </el-table-column>
    <el-table-column label="支付状态">
        <template slot-scope="scope">
          {{scope.row.payStatusText}}
            <!-- <p v-if='scope.row.payStatus==1'>待付款</p>
          <p v-if='scope.row.payStatus==5'>已支付</p>

          <p v-if='scope.row.payStatus==15'>已取消</p> -->
          <!-- <p v-if='scope.row.refund_status==5'>退款申请中</p> -->
          <!-- <p v-if='scope.row.order_status==20'>已关闭</p> -->
        </template>
    </el-table-column>
    <!-- <el-table-column label="缴费类型">
     <template slot-scope="scope">
      <p v-if="scope.row.actualAmount == scope.row.amount">全额缴费</p>
              <p class="right_span" v-else>押金缴费</p>

     </template>
    </el-table-column> -->
    <el-table-column label="邀请合伙人" >
      <template slot-scope="scope">
         <p v-if="scope.row.order_invitation">
           {{scope.row.order_invitation.invitation_user.mobile}} | {{scope.row.order_invitation.invitation_user.realname}}
         </p>
         <p v-else>---</p>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" prop="createdAt"></el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="watchOrderDetail(scope.row)">详情</el-button>
      </template>
    </el-table-column>
    </el-table>

     <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

          <jdialog title="小店订单详情" :visible.sync = 'showJoinOrderDetail' width='600px'>
        <div style="padding:20px;" class="detail">
          <div style="margin-bottom:14px;">
            <div style="width:240px;float:left;">
              <span >下单用户：</span><span class="right_span" v-if="detail.memberName">{{detail.memberName}}</span>
              <span v-else>---</span>
            </div>
           <div>

              <span>缴费类型：</span><span class="right_span" v-if="detail.actualAmount == detail.amount">全额缴费</span>
              <span class="right_span" v-else>押金缴费</span>
           </div>
          </div>

          <div style="margin-bottom:14px;">
             <div style="width:240px;float:left;">
              <span >缴费金额：</span><span class="right_span" v-if="detail.actualAmount">¥{{detail.actualAmount}}</span>
              <span v-else>---</span>
            </div>
            <div>
              <span >支付流水号：</span><span class="right_span" v-if="detail.orderNo">{{detail.orderNo}}</span>
              <span v-else>---</span>
            </div>
          </div>
          <div style="margin-bottom:14px;">
            <div style="width:240px;float:left;">
              <span >支付状态：</span>
              <span class="right_span">{{detail.payStatusText}}</span>
            </div>
            <span>创建时间：</span><span >{{detail.createdAt}}</span>
          </div>
          <div style="margin-bottom:14px;">
            <span>认领小店：</span>
            <span v-if="detail.sellerName">{{detail.sellerName}}</span>
            <span v-else>---</span>
          </div>
          <div style="margin-bottom:14px;">
            <span>小店地址：</span>
            <!-- <span>杭州市.滨江区.滨康路101号海威大厦</span> -->
            <span v-if="detail.sellerAddress">{{detail.sellerAddress}}</span>
            <span  v-else>---</span>
          </div>
          <div style="margin-bottom:14px;">
            <div style="width:240px;float:left;">
              <span >邀请员工：</span>
              <!-- <span class="right_span" v-if="order_invitation.invitation_user">{{order_invitation.invitation_user.mobile}}</span> -->

            </div>
            <span>员工姓名：</span>
            <!-- <span v-if="order_invitation.invitation_user">{{order_invitation.invitation_user.realname}}</span> -->
          </div>
          <div style="margin-bottom:14px;font-size:12px;color:#fff;background-color:red;">员工邀请关系查看；员工账号邀请入驻的小店记录员工邀请关系，仅作记录，分佣与合伙人账号结算</div>
        </div>
      </jdialog>
 </div>
</template>

<script>
    import {
      sellerOrderList
    } from '../../api/store';
// import {shoporderSerchordertype} from "@/api/goods"
import { API_BASE_URL } from "@/config";
export default {
    data(){
        return {
            loading:true,
            is_export:'',
            created_at_GT:'',
            created_at_LT:'',
            page:1,
            size:15,
            order_status:'',
            order_type:'',
            mobile:'',
            order_no:'',
            total:0,
            tableData:[],

            showJoinOrderDetail:false,
            detail:{},
            order_invitation:{}
        }
    },
    created(){
     this.getshoporderSerchordertypeData()
    },
    mounted(){

    },
    methods:{
      searchShopOrder(){
        this.getshoporderSerchordertypeData()
      },
      pageChange(page){
          this.page  = page
          this.getshoporderSerchordertypeData()
      },
     exportOrderData(){
       this.is_export = 1
       this.getshoporderSerchordertypeData()
     },
    //获取加盟订单列表
    async getshoporderSerchordertypeData(){

      if(this.order_type == 0) {
        this.order_type = ''
      }
      let data = {
        pageNum:this.page,
        pageSize:this.size,
        payStatus:this.order_status,
        orderNo:this.order_no,
        startDate:this.created_at_GT,
        endDate:this.created_at_LT,
        mobile:this.mobile,
        sellerType:this.order_type,
        // order_types:[40],
        is_export:this.is_export
      }

// orderNo
// memberKeyword
// sellerKeyword
// startDate
// endDate
// payStatus
// sellerType
// pageSize
// pageNum
let url;
                url = 'pageNum='+this.page+
                    '&pageSize='+this.size
                this.order_status?url +="&payStatus=" + this.order_status:''
                this.order_no?url +="&orderNo=" + this.order_no:''
                this.created_at_GT?url +="&startDate=" + this.created_at_GT:''
                this.created_at_LT?url +="&endDate=" + this.created_at_LT:''
                this.mobile?url +="&mobile=" + this.mobile:''
                this.order_type?url +="&sellerType=" + this.order_type:''
                this.is_export?url +="&is_export=" + this.is_export:''

      // var url = '&order_status='+this.order_status+
      //           '&order_no='+this.order_no+
      //           '&created_at_GT='+this.created_at_GT+
      //           '&created_at_LT='+this.created_at_LT+
      //           '&mobile='+this.mobile+
      //           '&page='+this.page+
      //           '&is_export='+this.is_export+
      //           '&order_type=40'+
      //           '&order_types[]='+this.order_type
      let res = await sellerOrderList(url)
        console.log(res)
      if(res.code === 200){
          if(this.is_export == 1){
             this.is_export = ''
             window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
        );
          }else{
            this.loading = false
          this.tableData = res.data.list
          this.total = res.data.total
          }
      }else{
          this.loading = false
          this.$message.error(res.message)
      }
    },

     watchOrderDetail(form){
       this.showJoinOrderDetail = true
       this.detail = form
      //  this.order_invitation = form.order_invitation
    },

    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    }
}

</script>

<style lang="scss" scoped>
.shop{
    padding: 20px;

    .pagination{
        float: right;
        margin-top: 20px;
    }
    .detail{
      padding: 20px;
      span{
        color:#333;
        font-size:14px;
        margin-right:12px;
      }

    }
}
</style>
